<template>
	<div class="bottom-wrap">
		<!-- 外层容器添加居中样式 -->
		<div class="container">
			<!-- 版权信息单独一行 -->
			<el-row :gutter="40" style="margin-bottom: 20px;">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<div class="copyright">
						<div class="copyright-text">
							<span class="copyright-year">Copyright © 2013-{{ new Date().getFullYear() }}</span>
							<span class="separator">|</span>
							<span class="copyright-site">95csw.com 慈善动态网 版权所有</span>
						</div>
						<!-- 技术支持文字 + 带圆角和动画的logo -->
						<div class="tech-support">
							<span class="tech-text">技术支持：</span>
							<a href="https://tonisoft.hy2w.com/" target="_blank" rel="noopener noreferrer" class="logo-link">
								<img src="@/assets/toni_logo.jpg" alt="海盐同力软件有限公司" class="logo-img">
							</a>
						</div>
					</div>
				</el-col>
			</el-row>

			<div class="line"></div>

			<!-- 备案信息 -->
			<el-row :gutter="40" class="record-row">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<div class="bh">
						<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
							浙ICP备15025139号
						</a>
					</div>
				</el-col>
			</el-row>
		</div>

		<!-- 返回顶部按钮 - 悬浮样式 -->
		<el-backtop :bottom="60" :visibility-height="300" class="back-to-top">
			<div class="backtop-icon">
				<img src="@/assets/top.png" alt="返回顶部" />
			</div>
		</el-backtop>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// 已完全移除导航相关数据
		};
	},
	mounted() {
		// 监听滚动事件，实现滚动到底部时的动画
		const handleScroll = () => {
			// 计算页面滚动的距离
			const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			// 计算页面总高度和可视区域高度
			const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			const documentHeight = Math.max(
				document.body.scrollHeight,
				document.body.offsetHeight,
				document.documentElement.clientHeight,
				document.documentElement.scrollHeight,
				document.documentElement.offsetHeight
			);
			
			// 当滚动到接近底部时（距离底部100px内）
			if (scrollTop + windowHeight >= documentHeight - 100) {
				this.triggerAnimation();
				// 只触发一次动画
				window.removeEventListener('scroll', handleScroll);
			}
		};
		
		// 初始检查是否已在底部
		setTimeout(handleScroll, 100);
		// 添加滚动监听
		window.addEventListener('scroll', handleScroll);
	},
	methods: {
		triggerAnimation() {
			// 先显示文字，稍延迟后显示logo，形成横向连续动画
			const text = document.querySelector('.tech-text');
			if (text) {
				text.classList.add('animate-in');
				
				// 文字动画开始后再触发logo动画，形成连续效果
				setTimeout(() => {
					const logo = document.querySelector('.logo-img');
					if (logo) {
						logo.classList.add('animate-in');
					}
				}, 200);
			}
		}
	}
}
</script>

<style scoped>
.bottom-wrap {
	width: 100%;
	background-color: #404040;
	color: #fff;
	padding: 20px 0;
	position: relative;
}

/* 容器样式，确保所有设备上居中，不受按钮影响 */
.container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
}

.line {
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.1);
	margin: 15px 0;
}

/* 版权信息样式 - 确保所有设备居中 */
.copyright {
	color: #d0d0d0;
	font-size: 14px;
	line-height: 32px;
	text-align: center;
}

/* 版权文字容器 - 确保同一行显示 */
.copyright-text {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 6px;
}

/* 分隔符样式 */
.separator {
	color: #888;
	margin: 0 3px;
}

/* 技术支持区域样式 */
.tech-support {
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	overflow: hidden;
	font-size: 14px;
}

.tech-support .tech-text {
	margin-right: 6px;
	color: #d0d0d0;
	opacity: 0;
	transform: translateX(-20px);
	transition: all 0.5s ease-out;
}

/* 公司logo样式 - 确保四个角都有圆角 */
.logo-link {
  display: inline-block;
  overflow: hidden;
  border-radius: 4px;
  padding: 0;
  line-height: 0;
}

.logo-img {
  max-height: 25px;
  width: auto;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.5s ease-out;
  border-radius: 3px;
  display: block;
}

.logo-img.animate-in,
.tech-text.animate-in {
	opacity: 1;
	transform: translateX(0);
}

.logo-img:hover {
	opacity: 0.8;
	transform: scale(1.05);
	transition: all 0.3s ease;
}

/* 备案信息样式 - 确保所有设备居中 */
.bh {
	text-align: center;
	padding-top: 8px;
}

.bh a {
	color: #d0d0d0;
	text-decoration: none;
	font-size: 12px;
}

/* 返回顶部按钮悬浮样式 */
.back-to-top {
	position: fixed;
	right: 15px;
	bottom: 30px;
	z-index: 999;
}

.backtop-icon {
	width: 40px;
	height: 40px;
	text-align: center;
	background-color: #888888;
	border: 2px solid rgba(255, 255, 255, .2);
	border-radius: 50px;
	transition: background-color 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.backtop-icon img {
	width: 20px;
	height: 20px;
	margin-top: 10px;
}

.backtop-icon:hover {
	background-color: #fdd000;
	cursor: pointer;
}

/* 响应式调整 */
@media screen and (max-width: 539px) {
	.copyright {
		font-size: 10px;
		line-height: 22px;
	}
	
	/* 移动端版权信息分行显示 */
	.copyright-text {
		flex-wrap: wrap;
		flex-direction: column;
		gap: 4px;
	}
	
	/* 隐藏移动端分隔符 */
	.separator {
		display: none;
	}
	
	/* 技术支持文字同步缩小 */
	.tech-support {
		font-size: 10px;
	}
	
	/* 同步缩小logo尺寸以保持比例 */
	.logo-img {
		max-height: 18px;
		border-radius: 3px;
	}
	
	/* 备案号也进一步缩小 */
	.bh a {
		font-size: 10px;
	}
	
	.back-to-top {
		right: 10px;
		bottom: 20px;
	}
	
	.backtop-icon {
		width: 36px;
		height: 36px;
	}
	
	.backtop-icon img {
		width: 18px;
		height: 18px;
		margin-top: 9px;
	}
}

@media screen and (min-width: 540px) and (max-width: 767px) {
	.copyright {
		font-size: 12px;
	}
	
	.bh a {
		font-size: 11px;
	}
}
</style>